<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            margin: 0px 0px;
            padding: 0px 0px;
        }

        #app {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: calc(100vh - 45px);
        }

        .app-row {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-content: center;
            width: 100vw;
            align-items: center;
            margin: 3px 0px;
        }

        #sub {
            display: block;
            position: absolute;
            right: 15px;
            bottom: 15px;
            width: 55px;
            height: 30px;
        }

        .label {
            margin-right: 5px;
            font-size: 14px;
            font-weight: bold;
        }

        input {
            height: 32px;
            outline-width: 5px;
            border: 2px solid #47535ede;
            border-radius: 5px;
            outline-color: #47535ede;
        }

        #configFile {
            background-color: bisque;
            height: 55px;
            width: calc(100% - 26px);
            position: absolute;
            left: 13px;
            display: flex;
            align-content: center;
            border-radius: 6px;
            top: 5px
        }

        .configFileButton {
            margin: 8px 8px;
        }
    </style>
</head>

<body>
    <!-- <div id="configFile" >
        <button class="configFileButton">主配置文件</button>
    </div> -->
    <div id="app">
        <div class="app-row">
            <div style="color: red;font-weight: bold; margin-right: 5px;">*</div>
            <div class="label">服务器名: </div>
            <input type="text" id="name" placeholder="tomcat服务器名"
                style="min-width: 250px; width: 35%; max-width: 390px;" onblur="setName()"></input>
        </div>

        <div class="app-row">
            <div style="color: red;font-weight: bold; margin-right: 5px;">*</div>
            <div class="label">安装路径: </div>
            <input type="text" id="installPath" placeholder="tomcat安装路径"
                style="min-width: 250px; width: 35%; max-width: 390px;" onclick="getDir('installPath')"></input>
        </div>

        <div class="app-row">
            <div style="color: red;font-weight: bold; margin-right: 5px;">*</div>
            <div class="label">java命令: </div>
            <input type="text" id="javaExec" placeholder="java可执行文件"
                style="min-width: 250px; width: 35%; max-width: 390px;" onclick="getJavaFile('javaExec')"></input>
        </div>

        <div class="app-row">
            <div class="label" style="margin-left: 11px;">代理路径: </div>
            <input type="text" id="proxyPath" placeholder="默认使用 fun.ipconfig.agent"
                style="min-width: 250px; width: 35%; max-width: 390px;" onclick="getDir('tempPath')"></input>
        </div>
    </div>
    <button id="sub" onclick="subit()">确认</button>
</body>
<script>
    let config = {}
    const vscode = acquireVsCodeApi();

    function getDir(id) {
        vscode.postMessage({ page: "tomcat.html",type: 'dir', message: 'This is a message from the webview', id }, '*');
    }

    function getJavaFile(id) {
        vscode.postMessage({page: "tomcat.html", type: 'file', message: 'This is a message from the webview', id }, '*');
    }

    function setName() {
        config['name'] = document.getElementById('name').value;
    }

    function subit() {
        vscode.postMessage({page: "tomcat.html", type: 'subit', message: 'This is a message from the webview', config }, '*');
        if (config['deleteName'] != null) {
            config['deleteName'] = config['name'];
        }
    }

    function webviewReceive(data) {
        console.log(data);
        // 服务器回传
        switch (data.data.type) {
            case "init": {
                if (data.data.data == null && ( config != {} && config != null )) {
                    console.log("init")
                    Object.keys(config).forEach(key => {
                        let el = document.getElementById(key)
                        if (el != null) {
                            el.value = "";
                        }
                    });
                    config = data.data.data === null || data.data.data === undefined ? {} : data.data.data;
                    return;
                }
                config = data.data.data === null || data.data.data === undefined ? {} : data.data.data;
                // 初始化
                Object.keys(config).forEach(key => {
                    let el = document.getElementById(key)
                    if (el != null) {
                        el.value = config[key];
                    }
                })
            }
            case "file": 
            case "dir": {
                let path = data.data.path;
                document.getElementById(data.data.id).value = path;
                config[data.data.id] = path;
            }
        }
    }

    onload = function () {
        window.addEventListener('message', webviewReceive);
        vscode.postMessage({ page: "tomcat.html", type: "init" }, '*');
    }

</script>

</html>